<template>
    <div>
        <div class="my-data_nav">
            <div :class="liaoType==1?'active':''" @click="changeTab(1)">我的文稿</div>
            <div :class="liaoType==2?'active':''" @click="changeTab(2)"> 已阅文稿</div>
        </div>
        <div class="my-data-search">
            <div class="left">
                <select dir="ltr" v-model="mtype" @change="cmtype()">
                    <option value="0">全部料</option>
                    <option value="1">返还料</option>
                    <option value="2">普通料</option>
                </select>
            </div>
            <div class="right">
                <input type="text" placeholder="请输入料标题" value="" v-model="keyword"><a class="a2" @click="search()">
                <img src="">
            </a>
            </div>
        </div>
        <div v-if="liaoType==1">
            <ul class="list01">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        loading-text="加载中"
                        :immediate-check="false"
                        @load="onLoad"
                >
                    <li v-for='(item, index) in mylist'>
                        <div :class="item.status==0?'box-r4 active':'box-r4'" @click="detail1(item.id)">
                            <div class="open_icon" v-if="item.isregularpublic==1"><img
                                    src="../../assets/img/open_icon.png"></div>
                            <div class="my-data_title">
                                <div class="top">
                                    <div class="time">
                                        <i class="i_1" v-if="item.mtype=='1'">红</i>
                                        <i class="i_2" v-else-if="item.mtype=='2'">黑</i>
                                        <i class="i_3" v-else-if="item.mtype=='3'">走</i>
                                        {{item.createtime}}
                                    </div>
                                    <div class="state"><span>{{item.statusname}}</span></div>
                                    <div class="canceal" @click.stop="showlliao(item.id)" v-if="item.showstatus=='1'">
                                        隐藏
                                    </div>
                                    <div class="canceal" @click.stop="showlliao(item.id)" v-else>取消隐藏</div>
                                </div>
                            </div>
                            <div class="my-data_title">
                                <div class="left">
                                    <p>
                                        <span class="isreturn" v-if="item.isreturn==1">不对返还</span>
                                        <!--<span class="isreturn" @click.stop="showClick(item.isreturn)">体育资讯</span>-->
                                        <span class="isreturn"  v-if="item.saletype==1">{{item.baoshititle}}</span>
                                        {{item.title}}
                                    </p>
                                </div>
                                <div class="right">
                                    <p class="red_ft"
                                       style="display: flex;align-items: center;justify-content: flex-end">
                                        ￥{{item.price}}
                                        <!--<img style="width: 12px;height: 12px;margin-left: 3px" src="../../assets/img/money_icon.png"/>-->
                                    </p>
                                </div>
                            </div>
                            <div class="sales-status">
                                <p><span class="s1">查看人数</span><span class="s2">{{item.seenumber}}</span></p>
                                <p><span class="s1">已售</span><span class="s2">{{item.ordernumber}}</span></p>
                                <p><span class="s1">收币总值/
                                    <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                                </span><span class="s2 red_ft">￥{{item.ordermoney}}</span></p>
                            </div>
                            <div class="returenbtn" v-if="item.failsbutton==1 || item.truebutton==1">
                                <div class="btn01" v-if="item.failsbutton==1" @click.stop="returnbtn(item.id)">不对返还
                                </div>
                                <div class="btn02" v-if="item.truebutton==1" @click.stop="truebtn(item.id)">正确收币</div>
                            </div>
                            <div class="returenbtn" v-if="item.lastpanding">
                                <div class="btn03">判定为:{{item.lastpanding}}</div>
                            </div>
                            <div class="istop">
                                <a class="active" v-if="item.istop==1" @click.stop="istop(item.id,0)"></a>
                                <a class="" v-else @click.stop="istop(item.id,1)"></a>
                            </div>
                        </div>
                    </li>
                </van-list>
            </ul>
        </div>
        <div v-else>
            <ul class="list01">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        loading-text="加载中"
                        :immediate-check="false"
                        @load="onLoad"
                >
                    <li class="box-r4" @click="detail2(item.materialsid)" v-for="(item, index) in mylist">
                        <div class="my-data_title">
                            <div class="left">
                                <div class="user"><img :src="item.avatar"><span>{{item.nickname}}</span><span
                                        class="s1">{{item.createtime}}</span></div>
                            </div>
                        </div>
                        <div class="my-data_title">
                            <div class="left">
                                <p>
                                    <!--<span class="isreturn" v-if="item.isreturn==1">不对返还</span>-->
                                    <span class="isreturn mr-5" v-if="item.saletype==1">包时{{item.baodays}}天</span>
                                    <span class="isreturn" style="background-color: #4482E4;border: 0.5px solid #4482E4;" :class="{'isreturnColor': item.isreturn!=1}" @click.stop="showClick(item.isreturn)">{{item.isreturn!=1?'【体育资讯】':'体育资讯'}}</span>

                                    {{item.materialstitle}}
                                </p>
                            </div>
                        </div>
                        <div class="my-data_operation"><p style="display: block;">作者已收币：
                            <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                            ￥{{item.money}}</p><a class="dlt" @click.stop="del(item.ordernumber)"></a></div>
                        <div class="istop" @click.stop="istop1()">
                            <a class="active" v-if="item.useristop==1" @click.stop="istop1(item.ordernumber,0)"></a>
                            <a class="" v-else @click.stop="istop1(item.ordernumber,1)"></a>
                        </div>
                    </li>
                </van-list>
            </ul>
        </div>
        <footers name="/wodeliao"></footers>
    </div>
</template>

<script>
    var timer;
    import footers from '@/components/footer';

    export default {
        name: "",
        components: {
            footers
        },
        data() {
            return {
                loading: false,
                finished: false,
                page: 1,
                liaoType: 1,
                mtype: 0,
                keyword: "",
                mylist: [],
            }
        },
        mounted() {
            this.page = 1;
            this.mtype = 0;
            this.liaoType = 1;
            this.loading = false;
            this.finished = false;
            this.keyword = "";
            this.mylist = [];
            this.myMaterialsList();
        },
        methods: {
            showClick(type) {
                if (type != 1) return false;
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '不对返还',
                    showCancelButton: false,
                    overlayStyle: {backgroundColor: 'black'}
                })
                    .then(() => {
                        // on confirm
                    })
            },
            //点击隐藏
            showlliao(id) {
                var that = this;

                that.request1.post1({
                    url: that.Url + "api/materials/hideSave",
                    params: {materialsid: id},
                    success: function (res) {
                        that.loading = false;
                        console.log(res)
                        if (res.data.code == 1) {
                            that.$toast.success("操作成功");
                            that.page = 1;
                            that.finished = false;
                            that.mylist = [];
                            that.myMaterialsList();
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            //点击正确收款
            truebtn(id) {
                var that = this;

                that.$dialog.confirm({
                    title: '正确收款',
                    message: '是否正确收款',
                    cancelButtonText: "否",
                    confirmButtonText: "是"
                }).then(() => {
                    that.request1.post1({
                        url: that.Url + "api/materials/trueMateSave",
                        params: {materialsid: id},
                        success: function (res) {
                            that.loading = false;
                            console.log(res)
                            if (res.data.code == 1) {
                                that.$toast.success("操作成功");
                                that.page = 1;
                                that.finished = false;
                                that.mylist = [];
                                that.myMaterialsList();
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg);
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
            },
            //点击不对返还按钮
            returnbtn(id) {
                var that = this;

                that.$dialog.confirm({
                    title: '不对返还',
                    message: '是否不对返还',
                    cancelButtonText: "否",
                    confirmButtonText: "是"
                }).then(() => {
                    that.request1.post1({
                        url: that.Url + "api/materials/failsMateSave",
                        params: {materialsid: id},
                        success: function (res) {
                            that.loading = false;
                            console.log(res)
                            if (res.data.code == 1) {
                                that.$toast.success("操作成功");
                                that.page = 1;
                                that.finished = false;
                                that.mylist = [];
                                that.myMaterialsList();
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
            },
            //置顶和不置顶
            istop(id, num) {
                var that = this;
                that.request1.post1({
                    url: that.Url + "api/materials/topSave",
                    params: {materialsid: id, istop: num},
                    success: function (res) {
                        that.loading = false;
                        console.log(res)
                        if (res.data.code == 1) {
                            that.page = 1;
                            that.finished = false;
                            that.mylist = [];
                            that.myMaterialsList();
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            //我买的料置顶
            istop1(ordernum, num) {
                var that = this;
                that.request1.post1({
                    url: that.Url + "api/materials/buytopSave",
                    params: {ordernumber: ordernum, istop: num},
                    success: function (res) {
                        that.loading = false;
                        console.log(res)
                        if (res.data.code == 1) {
                            that.page = 1;
                            that.finished = false;
                            that.mylist = [];
                            that.myMaterialsList();
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            //删除我买的料
            del(ordernumber) {
                var that = this;

                that.$dialog.confirm({
                    title: '提示',
                    message: '确认要删除吗？',
                    confirmButtonText: "删除"
                }).then(() => {
                    that.request1.post1({
                        url: that.Url + "api/materials/delbuyMaterials",
                        params: {ordernumber: ordernumber},
                        success: function (res) {
                            that.loading = false;
                            console.log(res)
                            if (res.data.code == 1) {
                                that.$toast.success("删除料成功");
                                that.page = 1;
                                that.finished = false;
                                that.mylist = [];
                                that.myMaterialsList();
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
            },
            //点击搜索
            search() {
                this.page = 1;
                this.finished = false;
                this.mylist = [];
                this.myMaterialsList();
            },
            // 料分类选择
            cmtype() {
                // console.log(this.mtype);
                this.page = 1;
                this.finished = false;
                this.mylist = [];
                this.myMaterialsList();
            },
            //我的料触底加载更多
            onLoad() {
                // 异步更新数据
                this.page++;
                var that = this;
                timer = setTimeout(function () {
                    that.myMaterialsList();
                }, 1000)
            },
            myMaterialsList() {
                var that = this;
                if (that.liaoType == 1) {
                    //我的料
                    that.request1.post1({
                        url: that.Url + "api/materials/myMaterialsList",
                        params: {mtype: that.mtype, page: that.page, keyword: that.keyword},
                        success: function (res) {
                            that.loading = false;
                            console.log(res)
                            if (res.data.code == 1) {
                                var ress = res.data.data.data;
                                if (ress.length < 1 || ress == null) {
                                    // 加载结束
                                    that.finished = true;
                                    return;
                                } else {

                                    that.mylist.push.apply(that.mylist, ress)
                                }
                                console.log(that.mylist)
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    })
                } else {
                    //我买的料
                    that.request1.post1({
                        url: that.Url + "api/materials/buyMaterialsList",
                        params: {mtype: that.mtype, page: that.page, keyword: that.keyword},
                        success: function (res) {
                            that.loading = false;
                            console.log(res)
                            if (res.data.code == 1) {
                                var ress = res.data.data.data;
                                if (ress.length < 1 || ress == null) {
                                    // 加载结束
                                    that.finished = true;
                                    return;
                                } else {
                                    that.mylist.push.apply(that.mylist, ress)
                                }

                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    })
                }
            },
            // 切换
            changeTab(id) {
                this.liaoType = id;
                this.page = 1;
                this.finished = false;
                this.mylist = [];
                this.myMaterialsList();
            },
            detail1(id) {
                this.$router.push('/Wodeliao/wodeliaoxq/' + id);
            },
            detail2(id) {
                this.$router.push('/Wodeliao/womaideliaoxq/' + id);
            }
        },
        beforeDestroy() {
            clearTimeout(timer)
        }
    }
</script>

<style scoped lang="less">
    .mr-5{
        margin-right: 5px;
    }

    .my-data_nav {
        height: 45px;
        position: fixed;
        background: #fff;
        width: 100%;
        display: -webkit-box;
        top: 0;
        left: 0;
        z-index: 1;
        font-size: 14px;
    }

    .my-data_nav div {
        -webkit-box-flex: 1;
        display: block;
        text-align: center;
        line-height: 45px;
        margin: 0 20px;
    }

    .my-data_nav div.active {
        border-bottom: 3px solid #fa5d4e;
    }

    .my-data-search {
        display: -webkit-box;
        background: #fff;
        height: 40px;
        position: fixed;
        top: 45px;
        left: 0;
        width: 100%;
        z-index: 1;
        border-top: .5px solid #efefef;
        box-shadow: 0 3px 10px rgba(115, 117, 154, .1);
    }

    .my-data-search .left {
        width: 90px;
    }

    .my-data-search .left select {
        width: 90px;
        padding-left: 25px;
        text-align: center;
        border: none;
        height: 40px;
        background: url("../../assets/img/xiala.png") no-repeat 70px;
        background-size: 10px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
    }

    .my-data-search .right {
        -webkit-box-flex: 1;
        overflow: hidden;
        display: -webkit-box;
        left: 0;
        position: relative;
    }

    .my-data-search .right input {
        display: block;
        -webkit-box-flex: 1;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
        background: #efeff4;
        padding: 5px 40px 5px 30px;
        border-radius: 100px;
        margin: 5px 10px;
        text-align: center;
    }

    .my-data-search .right a.a2 {
        display: block;
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: 1;
        width: 18px;
        height: 18px;
        background: #4482e4;
        border-radius: 0 50px 50px 0;
        width: 38px;
        height: 30px;
    }

    .my-data-search .right a.a2 img {
        display: block;
        width: 15px;
        margin-left: 10px;
        margin-top: 7px;
    }

    .box-r4 {
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 0 15px;
        overflow: hidden;
        position: relative;
    }

    .red_ft {
        color: #fc5d4d !important;
    }

    .list01 {
        display: block;
        margin-top: 100px;
        margin-bottom: 80px;
        line-height: 1.15;

        li {
            display: block;
            position: relative;
        }

        .my-data_title {
            display: -webkit-box;
            padding-top: 8px;
            line-height: 22px;
            margin-bottom: 5px;
        }

        .my-data_title .top {
            width: 100%;
            position: relative;
        }

        .my-data_title .time {
            float: left;
            color: #999;
            font-size: 12px;
        }

        .my-data_title .time i {
            display: inline-block;
            font-style: normal;
            height: 18px;
            line-height: 18px;
            margin-right: 6px;
        }

        .my-data_title .time i.i_1 {
            border: .5px solid #ef4433;
            background: #ef4433;
            border-radius: 2px;
            padding: 0 3px;
            color: #fff;
        }

        .my-data_title .time i.i_2 {
            border: .5px solid #707070;
            background: #707070;
            color: #fff;
            border-radius: 2px;
            padding: 0 3px;
        }

        .my-data_title .time i.i_3 {
            border: .5px solid #4482e4;
            background: #4482e4;
            border-radius: 2px;
            padding: 0 3px;
            color: #fff;
        }

        .my-data_title .state {
            float: left;
            font-size: 12px;
            position: absolute;
            right: -15px;
            top: 0;
            background: #fff7dc;
            height: 22px;
            line-height: 22px;
            border-radius: 4px 0 0 4px;
            color: #333;
            padding: 0 15px;
        }

        .my-data_title .canceal {
            float: left;
            font-size: 12px;
            position: absolute;
            right: 60px;
            top: 0;
            border: 1px solid #fff7dc;
            height: 22px;
            line-height: 22px;
            border-radius: 4px 0 0 4px;
            color: #fc7260;
            padding: 0 15px;
        }

        .my-data_title .state span {
            color: #fc7260;
        }

        .my-data_title .left {
            -webkit-box-flex: 1;
        }

        .my-data_title .left p {
            display: block;
            font-size: 15px;
            font-weight: 500;
            line-height: 22px;
        }

        .my-data_title .left p .isreturn {
            border: 0.5px solid #ef4433;
            background: #ef4433;
            border-radius: 5px;
            color: #fff;
            font-size: 12px;
            padding: 1px 6px;
        }

        .my-data_title .right {
            width: 75px;
        }

        .my-data_title .right p {
            display: block;
            line-height: 22px;
            text-align: right;
            font-weight: 700;
            font-size: 18px;
        }

        .sales-status {
            display: -webkit-box;
            border-top: .5px solid #efefef;
            margin-top: 10px;
            padding-top: 10px;
            margin-bottom: 12px;
        }

        .sales-status p {
            -webkit-box-flex: 1;
            text-align: center;
            width: 100%;
        }

        .sales-status p span {
            display: block;
        }

        .sales-status p span.s1 {
            font-size: 12px;
            color: #999;
        }

        .sales-status p span.s2 {
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }

        .returenbtn {
            display: flex;
            flex-flow: row;
            justify-content: flex-end;
            height: 38px;
        }

        .returenbtn div {
            height: 28px;
            line-height: 28px;
            width: 80px;
            text-align: center;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 14px;
        }

        .returenbtn .btn01 {
            border: 1px solid #eee;
            margin-right: 10px;
        }

        .returenbtn .btn02 {
            background: #fc5d4d;
            color: #fff;
        }

        .returenbtn .btn03 {
            width: auto;
            font-size: 12px;
            background: #eee;
            padding: 0 12px;
            border-radius: 19px;
        }

        .istop {
            width: 35px;
            height: 35px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .istop a {
            display: block;
            width: 35px;
            height: 35px;
            background: url() 50% no-repeat;
            background-size: 16px;
        }

        .istop a.active {
            display: block;
            width: 35px;
            height: 35px;
            background: url() 50% no-repeat;
            background-size: 16px;
        }

        .open_icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 22px;
            height: 22px;
            border-radius: 4px 0 0 0;
            overflow: hidden;
        }

        .open_icon img {
            display: block;
            width: 22px;
        }

        li .active {
            .my-data_title, .sales-status {
                opacity: .4;
            }
        }

        .my-data_title .left > div {
            color: #999;
            font-size: 12px;
            line-height: 32px;
            margin-top: 5px;
            padding-left: 2px;
        }

        .my-data_title .left .user img {
            display: block;
            height: 32px;
            float: left;
            border-radius: 50px;
        }

        .my-data_title .left .user span {
            display: block;
            float: left;
            height: 32px;
            line-height: 32px;
            padding-left: 5px;
        }

        .my-data_title .left .user span.s1 {
            float: right;
        }

        .my-data_operation {
            height: 40px;
            margin-top: 10px;
            margin-bottom: 5px;
        }

        .my-data_operation p {
            display: block;
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            color: #999;
            padding-left: 20px;
        }

        .my-data_operation a {
            display: block;
            float: right;
            width: 40px;
            height: 40px;
            background: url() no-repeat 50%;
            background-size: 22px;
        }
    }

    /*.list02{*/
    /*display: block;*/
    /*margin-top: 100px;*/
    /*margin-bottom: 80px;*/
    /**/
    /*}*/
</style>
